<template>
  <div
    class="jam-cell"
    :class="[lineClass, transparentClass, bigClass, useCenter]"
  >
    <!-- 左插槽 -->
    <slot name="left-icon"></slot>
    <!-- 左文 -->
    <div class="jam-cell_title">
      <div v-if="!!title">{{ title }}</div>
      <slot name="title" v-else></slot>
    </div>
    <!-- 右插槽 -->
    <slot name="right-icon"></slot>
    <!-- 右文 -->
    <div class="jam-cell_value">
      <div v-if="!!content">{{ content }}</div>
      <slot name="content" v-else></slot>
    </div>
    <!-- 箭头 -->
    <div v-if="!!arrowFlag" :class="[arrowType]" @click="shiftArrow"></div>
  </div>
</template>

<script>
// 组件的内部源码的入口
export default {
  name: 'jam-cell',
  props: {
    title: {
      type: String,
      default: '',
    },
    content: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: 'normal',
    },
    underline: {
      type: String,
      default: 'contentline',
    },
    transparent: {
      type: Boolean,
      default: false,
    },
    center: {
      type: Boolean,
      default: false,
    },
    arrow: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      arrowFlag: this.arrow,
    };
  },
  computed: {
    lineClass() {
      if (this.underline === 'contentline')
        return { 'jam-cell--contentline': true };
      else if (this.underline === 'borderline')
        return { 'jam-cell--borderline': true };
    },
    transparentClass() {
      return this.transparent
        ? { 'jam-cell--transparent': true }
        : { 'jam-cell--transparent': false };
    },
    bigClass() {
      return this.size === 'big' ? { 'jam-cell--bigsize': true } : '';
    },
    useCenter() {
      return this.center ? { 'jam-cell--center': true } : '';
    },
    arrowType() {
      switch (this.arrowFlag) {
        case 'down':
          return { 'down-arrow': true };
        case 'up': {
          return { 'down-arrow': true, 'shift-active': true };
        }
        case 'right': {
          return { 'right-arrow': true };
        }
        default:
          return '';
      }
    },
  },
  methods: {
    shiftArrow(ev) {
      // 如果是上下箭头，就切换
      if (this.arrowFlag === 'down') {
        this.arrowFlag = 'up';
      } else if (this.arrowFlag === 'up') {
        this.arrowFlag = 'down';
      }
      this.$emit('arrowEvent', this.arrowFlag, ev);
    },
  },
};
</script>

<style lang="less">
@import '../pub_less/index.less';
@import '../pub_less/mixin/line.less';
@import '../pub_less/base_icon.less';
.jam-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: @cell-vertical-padding @cell-horizontal-padding;
  // overflow: hidden;
  color: @cell-text-color;
  font-size: @cell-font-size;
  // line-height: @cell-line-height;
  background-color: @cell-background-color;
  &_value {
    flex: 1;
    text-align: right;
    color: @cell-value-color;
  }
  // 透明效果
  &--transparent {
    background-color: transparent;
  }
  // 内容区下划线
  &--contentline::after {
    .hairline-bottom(@cell-border-color, @padding-md, @padding-md);
  }
  // 通屏下划线
  &--borderline::after {
    .hairline-bottom(@cell-border-color);
  }
  &:last-child::after {
    display: none;
  }
  // 大尺寸
  &--bigsize {
    padding-top: @cell-large-vertical-padding;
    padding-bottom: @cell-large-vertical-padding;
    font-size: @cell-large-title-font-size;
  }
  // 垂直居中
  &--center {
    align-items: center;
  }
}
</style>